/*
 * @Author: your name
 * @Date: 2021-05-28 10:15:21
 * @LastEditTime: 2021-05-28 10:23:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-template\src\hooks\useClickOutside.ts
 */
import {ref, onMounted, onUnmounted, Ref} from 'vue'

const useClickOutside =(elementRef: Ref<null | HTMLElement>) => {
    const isClickOutside = ref(false)
    const handler = (e: MouseEvent) => {
        if(elementRef.value){
            if (elementRef.value.contains(e.target as HTMLElement)) {
                isClickOutside.value = false
              } else {
                isClickOutside.value = true
              }
        }
        onMounted(() => {
            document.addEventListener('click', handler)
        })

        onUnmounted(() => {
            document.removeEventListener('click', handler)
        })

        return {isClickOutside}
    }
}

export default useClickOutside